<template>
  <div class="flightItem">
    <!-- 列表 -->
    <div class="list" @click="showMore = !showMore">
      <el-row class="info" type="flex" align="middle">
        <el-col :span="6">{{data.airline_name}} {{data.flight_no}}</el-col>
        <el-col :span="12">
          <el-row type="flex" class="infoCenter">
            <el-col class="airport" :span="8">
              <strong>{{data.dep_time}}</strong>
              <span>{{data.org_airport_name}} {{data.org_airport_quay}}</span>
            </el-col>
            <el-col class="time" :span="8">
              <span>{{arrTime}}</span>
            </el-col>
            <el-col class="airport" :span="8">
              <strong>{{data.arr_time}}</strong>
              <span>{{data.dst_airport_name}} {{data.dst_airport_quay}}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          ￥
          <span class="price">{{data.base_price}}</span> 起
        </el-col>
      </el-row>
    </div>
    <!-- 更多推荐 -->
    <div class="recommend" v-if="showMore">
      <el-row type="flex" align="middle">
        <el-col :span="4">低价推荐</el-col>
        <el-col :span="20">
          <!-- 更多 -->
          <el-row
            type="flex"
            align="middle"
            class="sellList"
            v-for="item in data.seat_infos"
            :key="item.index"
          >
            <el-col :span="16">
              <span>{{item.group_name}}</span>
              | {{item.supplierName}}
            </el-col>
            <el-col :span="5" class="price">￥{{item.par_price}}</el-col>
            <el-col :span="3">
              <el-button type="warning" size="mini" @click="jumpPage(item)">选定</el-button>
              <span v-if="item.nums != 'A'">剩余：{{item.nums}}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMore: false
    };
  },
  props: ["data"],
  computed: {
    arrTime() {
      var start =
        Number(this.data.dep_time.split(":")[0] * 60) +
        Number(this.data.dep_time.split(":")[1]);
      var end =
        Number(this.data.arr_time.split(":")[0] * 60) +
        Number(this.data.arr_time.split(":")[1]);
      var diff = end - start;
      if (diff < 0) {
        diff = diff + 24 * 60;
      }
      return Math.floor(diff / 60) + "小时" + (diff % 60) + "分";
    }
  },
  methods: {
    jumpPage(item) {
      if (!this.$store.state.user.userInfo.token) {
        this.$alert("登录信息失效,请重新登录", {
          confirmButtonText: "确定",
          type: "warning",
          center: true,
          confirmButtonText: "重新登录"
        })
          .then(() => {
            this.$router.push({
              path: "/user/login",
              query: this.$route.query
            });
          })
          .catch(err => {});
        return;
      }
      this.$router.push(
        `/air/order?id=${this.data.id}&seat_xid=${item.seat_xid}`
      );
    }
  }
};
</script>

<style lang="less" scoped>
.flightItem {
  border: 1px solid #ddd;
  margin: 10px 0;
  .info {
    text-align: center;
    padding: 15px;
    cursor: pointer;
    .infoCenter {
      padding: 0 30px;
      .airport {
        display: flex;
        flex-direction: column;
        strong {
          font-size: 24px;
          font-weight: 400;
        }
        span {
          color: #999;
          font-size: 12px;
        }
      }
      .time {
        span {
          display: inline-block;
          font-size: 12px;
          color: #999;
          padding: 10px 0;
          border-bottom: 1px solid #ddd;
        }
      }
    }
    .price {
      font-size: 24px;
      color: #ffa500;
    }
  }
  .recommend {
    border-top: 1px solid #ddd;
    padding: 0 20px;
    background: #f6f6f6;
    .sellList {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      div {
        &:first-child {
          font-size: 12px;
          span {
            color: #008000;
          }
        }
        &:last-child {
          span {
            display: block;
            color: #666;
            margin-top: 5px;
          }
        }
      }
      .price {
        font-size: 20px;
        color: #ffa500;
      }
    }
  }
}
</style>